<template>
    <div class="app-container">
      <!--查询表单-->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="时间">
          <el-date-picker clearable size="small" style="width: 100%"
            v-if="startTime != '1900-03-23 18:35:23'"
            v-model="startTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="开始时间"
            @blur="fetchData()">
          </el-date-picker>
          <el-date-picker clearable size="small" style="width: 100%"
            v-else
            v-model="startNull"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="开始时间"
            @blur="fetchData()">
          </el-date-picker>
        </el-form-item>
  
        <el-form-item label="~">
          <el-date-picker clearable size="small" style="width: 100%"
            v-if="endTime != '2999-03-24 18:35:23'"
            v-model="endTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="结束时间"
            @blur="fetchData()">
          </el-date-picker>
          <el-date-picker clearable size="small" style="width: 100%"
            v-else
            v-model="endNull"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="结束时间"
            @blur="fetchData()">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="充电站点">
          <span>
            <el-select v-model="siteName" placeholder="请选择" clearable @change="fetchData()">
              <el-option
                    v-for="item in optionList"
                    :key="item"
                    :label="item"
                    :value="item"></el-option>
            </el-select>
          </span>
        </el-form-item>

        <el-form-item label="处理状态">
          <span>
            <el-select v-model="rank" placeholder="请选择" clearable @change="fetchData()">
              <el-option
                    v-for="item in rankList"
                    :key="item.handleName"
                    :label="item.handleName"
                    :value="item.handleNum"></el-option>
            </el-select>
          </span>
        </el-form-item>
  
        <!-- <el-form-item label="用户状态">
          <el-select v-model="searchObj.status" placeholder="请选择" clearable>
            <el-option label="正常" value="1" />
            <el-option label="锁定" value="0" />
          </el-select>
        </el-form-item> -->
  
        <el-button type="primary" icon="el-icon-search" @click="fetchData()">
          查询
        </el-button>
        <el-button type="default" @click="resetData()">清空</el-button>
        <el-button style="margin-left: 100px;" type="primary" @click="exportThis()">导出</el-button>
      </el-form>
  
      <!-- 列表 -->
      <el-table :data="list" border stripe>
        <el-table-column label="#" width="50">
          <template slot-scope="scope">
            {{ (page - 1) * limit + scope.$index + 1 }}
          </template>
        </el-table-column>
  
        <el-table-column prop="addressSite" label="充电站点名称"/>
        <el-table-column prop="number" label="充电桩编号" />
        <!-- <el-table-column prop="hiddenImg" label="资料附件">
          <template slot-scope="scope">
            <el-image
                    style="width: 150px;"
                    :src="scope.row.hiddenImg"
                    :preview-src-list="[scope.row.hiddenImg]"
                  />
          </template>
        </el-table-column> -->
        <el-table-column prop="address" label="地址位置" />
        <el-table-column prop="hitchType" label="故障类型">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.hitchType === 0" type="danger" size="mini">
              通讯故障
            </el-tag>
            <el-tag
              v-else-if="scope.row.hitchType === 1"
              type="danger"
              size="mini"
            >
              网关故障
            </el-tag>
            <el-tag
              v-else-if="scope.row.hitchType === 2"
              type="danger"
              size="mini"
            >
              配件故障
            </el-tag>
            <el-tag
              v-else-if="scope.row.hitchType === 3"
              type="danger"
              size="mini"
            >
              主板故障
            </el-tag>
            <el-tag
              v-else-if="scope.row.hitchType === 4"
              type="danger"
              size="mini"
            >
              过流
            </el-tag>
            <el-tag
              v-else-if="scope.row.hitchType === 5"
              type="danger"
              size="mini"
            >
              过压
            </el-tag>
            <el-tag
              v-else-if="scope.row.hitchType === 6"
              type="danger"
              size="mini"
            >
              电器短路
            </el-tag>
            <el-tag
              v-else-if="scope.row.hitchType === 7"
              type="danger"
              size="mini"
            >
              线路老化
            </el-tag>
            <el-tag v-else type="danger" size="mini">类型无法确定</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="故障内容" />
        <el-table-column prop="regTime" label="发生时间"/>
        <el-table-column prop="person" label="处理人"/>
        <el-table-column prop="rank" label="处理状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 2" type="seuccse" size="mini">
              未处理
            </el-tag>
            <el-tag
              v-else-if="scope.row.status === 3"
              type="seuccse"
              size="mini"
            >
              处理中
            </el-tag>
            <el-tag
              v-else-if="scope.row.status === 4"
              type="seuccse"
              size="mini"
            >
              已处理
            </el-tag>
            <el-tag
              v-else-if="scope.row.status === 5"
              type="seuccse"
              size="mini"
            >
              已完成
            </el-tag>
            <el-tag v-else type="danger" size="mini">状态无法确定</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="left" width="350">
            <template slot-scope="scope">
              <el-button
                      type="primary"
                      size="mini"
                      >
                      <router-link :to="'/charging-pile/hitch_detail/' + scope.row.id +'/'+ scope.row.status">
                        查看
                      </router-link>
              </el-button>
              <el-button 
                v-if="scope.row.status === 3 && scope.row.status != 5" 
                type="primary" 
                size="mini"
                @click="isDeal(scope.row.id)">
                  办理
              </el-button>
              <el-button 
                v-else-if="scope.row.status === 2 && scope.row.status != 5"
                type="primary" 
                size="mini"
                @click="isHandle(scope.row.id)">
                  处理
              </el-button>
              <el-button 
                v-else-if="scope.row.status === 4 && scope.row.status != 5"
                type="primary" 
                size="mini"
                @click="findDealByHitchId(scope.row.id)">
                  重新办理
              </el-button>
              <el-button 
                v-if="scope.row.status === 4 && scope.row.status != 5"
                type="primary" 
                size="mini"
                @click="dealTrue(scope.row.id)">
                  确认办理
              </el-button>
              <!-- <el-button
                      v-if="scope.row.rank != 5"
                      type="primary"
                      size="mini"
                      @click="fetchData()"
                      >
                  申诉
              </el-button> -->
              <el-button
                    v-if="scope.row.status != 5 && scope.row.status != 4"
                      type="danger"
                      size="mini"
                      @click="edd_change(scope.row.id)"
                      >
                  退回&更换
              </el-button>
            </template>
        </el-table-column>
          <!-- <template slot-scope="scope">
            <el-tag v-if="scope.row.bindStatus === 0" type="warning" size="mini">
              未绑定
            </el-tag>
            <el-tag
              v-else-if="scope.row.bindStatus === 1"
              type="success"
              size="mini"
            >
              已绑定
            </el-tag>
            <el-tag v-else type="danger" size="mini">绑定失败</el-tag>
          </template> -->
        <!-- <el-table-column label="处理状态" width="90">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 0" type="danger" size="mini">
              锁定
            </el-tag>
            <el-tag v-else type="success" size="mini">
              正常
            </el-tag>
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="操作" align="center" width="200">
            <template slot-scope="scope">
                <el-button
                        v-if="scope.row.status == 1"
                        type="primary"
                        size="mini"
                        @click="lock(scope.row.id, 0)"
                        >
                    锁定
                </el-button>
                <el-button
                        v-else
                        type="danger"
                        size="mini"
                        @click="lock(scope.row.id, 1)"
                        >
                    解锁
                </el-button>
                <el-button
                        type="primary"
                        size="mini"
                        @click="showLoginRecord(scope.row.id)"
                        >
                    登录日志
                </el-button>
            </template>
        </el-table-column> -->
      </el-table>
  
      <!-- 分页组件 -->
      <el-pagination
        :current-page="page"
        :total="total"
        :page-size="limit"
        :page-sizes="[1,5,10,15,20]"
        style="padding: 30px 0; "
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="changePageSize"
        @current-change="changeCurrentPage"
      />
      <!-- 退回&更换 -->
      <el-dialog title="退回或更换" :visible.sync="dialogTableVisible">
        <el-radio v-model="types" label="1">更换负责人</el-radio>
        <el-radio v-model="types" label="2">暂时无法处理</el-radio> <br/>
        <el-form ref="form" class="demo-form-inline" v-if="types == 1">
          <el-form-item label="原处理人">
            <el-input disabled v-model="plain"/>
          </el-form-item>
          <el-form-item label="预计完成时间">
            <el-date-picker clearable size="small" style="width: 100%"
              v-model="updateHandle.estimate"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="任务内容">
            <el-input type="textarea" v-model="updateHandle.assContent"/>
          </el-form-item>
          <el-form-item label="新处理人">
            <el-select v-model="updateHandle.person" placeholder="请选择">
              <el-option
                    v-for="item in handlePersonList"
                    :key="item"
                    :label="item"
                    :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="操作">
            <el-button type="primary" @click="submitToPerson()">更换</el-button>
          </el-form-item>
        </el-form>
        <el-form ref="form" class="demo-form-inline" v-if="types == 2">
          <el-form-item label="原因">
            <el-input type="textarea" v-model="updateHandle.returnContent"/>
          </el-form-item>
          <el-form-item label="操作">
            <el-button type="primary" @click="returnPerson()">退回</el-button>
          </el-form-item>
        </el-form>
    </el-dialog>
    <!-- 办理 -->
    <el-dialog title="办理" :visible.sync="dealIsTrue">
        <el-form ref="form" class="demo-form-inline" v-if="dealType == 1">
          <el-form-item label="办理说明">
            <el-input type="textarea" v-model="hitchDeal.explain"/>
          </el-form-item>
          <el-form-item label="现场图片">
              <el-upload
                        :on-success="onUploadSuccess"
                        :on-remove="onUploadRemove"
                        :multiple="false"
                        :action="uploadUrl"
                        :data="{ module: 'chargingPile' }"
                        list-type="picture-card"
                        >
                  <i class="el-icon-plus"></i>
              </el-upload>
          </el-form-item>
          <el-form-item label="其他附件">
              <el-upload
                        :on-success="onUploadSuccess2"
                        :on-remove="onUploadRemove"
                        :multiple="false"
                        :action="uploadUrl"
                        :data="{ module: 'chargingPile' }"
                        list-type="picture-card"
                        >
                  <i class="el-icon-plus"></i>
              </el-upload>
          </el-form-item>
          <el-form-item label="操作">
            <el-button type="primary" @click="dealSave()">办理</el-button>
          </el-form-item>
        </el-form>
        <el-form class="demo-form-inline" v-if="dealType == 2">
          <el-form-item label="办理说明(修改前)">
            <el-input disabled type="text" v-model="hitchDealNew.explain"/>
          </el-form-item>
          <el-form-item label="办理说明(请修改)">
            <el-input type="textarea" v-model="hitchDeal.explain"/>
          </el-form-item>
          <el-form-item label="现场图片(修改前)">
              <el-image
                      style="width: 150px;"
                      :src="hitchDealNew.sceneImg"
                      :preview-src-list="[hitchDealNew.sceneImg]"
                    />
          </el-form-item>
          <el-form-item label="现场图片(请修改)">
              <el-upload
                        :on-success="onUploadSuccess"
                        :on-remove="onUploadRemove"
                        :multiple="false"
                        :action="uploadUrl"
                        :data="{ module: 'chargingPile' }"
                        list-type="picture-card"
                        >
                  <i class="el-icon-plus"></i>
              </el-upload>
          </el-form-item>
          <el-form-item label="其他附件(修改前)">
              <el-image
                      style="width: 150px;"
                      :src="hitchDealNew.otherImg"
                      :preview-src-list="[hitchDealNew.otherImg]"
                    />
          </el-form-item>
          <el-form-item label="其他附件(请修改)">
              <el-upload
                        :on-success="onUploadSuccess2"
                        :on-remove="onUploadRemove"
                        :multiple="false"
                        :action="uploadUrl"
                        :data="{ module: 'chargingPile' }"
                        list-type="picture-card"
                        >
                  <i class="el-icon-plus"></i>
              </el-upload>
          </el-form-item>
          <el-form-item label="操作">
            <el-button type="primary" @click="dealSaveNew()">重新办理</el-button>
          </el-form-item>
        </el-form>
    </el-dialog>
    </div>
  </template>
<script>
import listApi from "@/api/charging-pile/list"
    export default{
        data() {
            let BASE_API = process.env.VUE_APP_BASE_API
            return {
              list: null, // 数据列表
              total: 0, // 数据库中的总记录数
              page: 1, // 默认页码
              limit: 5, // 每页记录数
              searchObj: {}, // 查询条件
              startTime:'1900-03-23 18:35:23',
              endTime:'2999-03-24 18:35:23',
              startNull:'',
              endNull:'',
              optionList:[],
              siteName:'',
              rankList:[],
              rank:'',
              types:'1',
              updateHandle:{},
              handlePersonList:[],
              plain:'', // 原处理人
              //loginRecordList: [], //会员登录日志
              dialogTableVisible: false, //对话框是否显示
              dealIsTrue:false,// 是否显示办理弹窗
              dealType:1,// 对应显示办理类型 1办理 2 重新办理
              uploadUrl: BASE_API + ':8130/api/oss/file/upload', //文件上传地址
              hitchDeal:{
                hitchId:0,
                explain:null,
                sceneImg:null,
                otherImg:null,
              },
              hitchDealNew:{},
            }
        },
        created (){
            this.fetchData();
            this.getOptins();
        },
        methods: {
            onUploadSuccess(response,file){
              if(response.code === 0){
                // 业务成功,填充borrower.borrowerAttachList
                this.hitchDeal.sceneImg = response.data.url;
              }else{
                this.$message.error(response.message);
              }
            },
            onUploadSuccess2(response,file){
              if(response.code === 0){
                // 业务成功,填充borrower.borrowerAttachList
                this.hitchDeal.otherImg = response.data.url;
              }else{
                this.$message.error(response.message);
              }
            },
            dealSave(){
              this.hitchDeal.hitchId = sessionStorage.getItem("_id");
              listApi.dealSave(this.hitchDeal).then(res => {
                if(res.message ==  "ok"){
                  this.$message.success("办理成功...");
                  history.go(0);
                }else{
                  this.$message.error("办理失败...")
                }
              })
            },
            dealSaveNew(){
              if(this.hitchDeal.explain == null){
                this.hitchDeal.explain = this.hitchDealNew.explain;
              }
              if(this.hitchDeal.sceneImg == null){
                this.hitchDeal.sceneImg = this.hitchDealNew.sceneImg;
              }
              if(this.hitchDeal.otherImg == null){
                this.hitchDeal.otherImg = this.hitchDealNew.otherImg;
              }
              this.hitchDeal.hitchId = sessionStorage.getItem("hitchId");
              listApi.dealSaveNew(this.hitchDeal).then(res => {
                if(res.message ==  "ok"){
                  this.$message.success("重新办理成功...")
                  this.fetchData();
                  this.hitchDeal = '';
                  this.dealIsTrue = false;
                  this.dealType = 1;
                }else{
                  this.$message.error("重新办理失败...")
                }
              })
            },
            isHandle(id){
              this.$confirm('处理后将无法修改, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                listApi.isHandle(id).then(res => {
                  if(res.message == "ok"){
                    this.$message.success("信息已处理...")
                    this.fetchData();
                  }else{
                    this.$message.error("信息处理失败0-0...")
                  }
                })
              })
            },
            isDeal(id){
              this.dealIsTrue = true;
              sessionStorage.setItem("_id",id);
            },
            dealTrue(id){
              this.$confirm('确认要办理吗?, 确认后您将无法修改', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                listApi.dealTrue(id).then(res => {
                if(res.message == "ok"){
                  this.$message.success("已为您办理...")
                  this.dealIsTrue = false;
                  this.fetchData();
                }else{
                  this.$message.success("办理失败...")
                }
              })
              })
            },
            returnPerson(){
              this.$confirm('退回后将重新走流程, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                let id = sessionStorage.getItem("id");
                listApi.returnPerson(this.updateHandle.returnContent,id).then(res => {
                  if(res.message == "ok"){
                    this.$message.success("您的信息已退回...")
                    this.dialogTableVisible = false;
                    this.fetchData();
                    this.updateHandle = ''
                  }else{
                    this.$message.error("退回失败0-0...")
                  }
                })
              })
            },
            submitToPerson(){
              this.$confirm('更换后您将无法干涉该任务, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                let attribute = this.updateHandle;
                let id = sessionStorage.getItem("id");
                listApi.updateHitchById(attribute.estimate,attribute.assContent,attribute.person,id).then(res => {
                  if(res.message == "ok"){
                    this.$message.success("更换成功了呢...")
                    this.dialogTableVisible = false;
                    this.fetchData();
                    this.updateHandle = ''
                  }else{
                    this.$message.error("更换失败0-0...")
                  }
                })
              })
            },
            edd_change(id){
              sessionStorage.setItem("id",id);
              this.dialogTableVisible = true;
              listApi.findHitchById(id).then(res => {
                 this.plain = res.data.code.person;
              })
            },
            getOptins(){
              listApi.findChargingStations().then(res => {
                console.log(res);
                this.optionList = res.data.options;
              })
              listApi.findCpHandleCode().then(res => {
                console.log(res);
                this.rankList = res.data.code;
              })
              listApi.findHandlePerson().then(res => {
                console.log(res);
                this.handlePersonList = res.data.code;
              })
            },
            changePageSize(pagesize){
                this.limit = pagesize;
                this.fetchData();
            },
            changeCurrentPage(pages){
                this.page = pages;
                this.fetchData();
            },
            fetchData(){
              if(this.startNull == null){
                this.startNull = '';
              }
              if(this.endNull == null){
                this.endNull = '';
              }
              if(this.siteName == ''){
                this.siteName = '请选择';
              }
              if(this.rank == ''){
                this.rank = '请选择';
              }
              if(this.startNull == '' && this.endNull == ''){
                  listApi.findAll(this.page, this.limit,this.startTime,this.endTime,this.siteName,this.rank).then(res => {
                    console.log(res);
                    this.list = res.data.list;
                    this.total = res.count;
                    console.log(this.total);
                  })
                  return;
              }
              if(this.startNull != '' && this.endNull != ''){
                listApi.findAll(this.page, this.limit,this.startNull,this.endNull,this.siteName,this.rank).then(res => {
                  console.log(res);
                  this.list = res.data.list;
                  this.total = res.count;
                })
                return;
              }
              if(this.endNull == ''){
                  listApi.findAll(this.page, this.limit,this.startNull,this.endTime,this.siteName,this.rank).then(res => {
                    console.log(res);
                    this.list = res.data.list;
                    this.total = res.count;
                  })
                  return;
              }
              if(this.startNull == ''){
                  listApi.findAll(this.page, this.limit,this.startTime,this.endNull,this.siteName,this.rank).then(res => {
                    console.log(res);
                    this.list = res.data.list;
                    this.total = res.count;
                  })
                  return;
              }
            },
            resetData(){
                // 还原表单
                this.startNull = '';

                this.endNull = '';
                
                this.siteName = '请选择';

                this.rank = '请选择';
                // 重新查询
                this.fetchData();
            },
            lock(id,status){
                userInfoApi.lock(id,status).then(res => {
                    this.$message.success(res.message);
                    this.fetchData();
                })
            },
            onUploadRemove(file,fileList){
              // console.log("onUploadRemove file" + file.response.data.url);
              // console.log("onUploadRemove file" + fileList);
              // 调用远程删除文件接口
                listApi.onUploadRemove(file.response.data.url).then(res => {
                })
            },
            findDealByHitchId(id){
              sessionStorage.setItem("hitchId",id);
              listApi.findDealByHitchId(id).then(res => {
                this.dealType = 2;
                this.dealIsTrue = true;
                console.log(res);
                this.hitchDealNew = res.data.hitchInfo;
              })
            },
            exportThis(){
              location.href ="http://localhost:9527/admin/cpHitch/export";
            },
        }
    }
</script>